<template>
  <div class="recommend-radio">
    <h3>{{ title }}</h3>
    <div class="recommend-info" v-for="(item,index) in data" :key="index">
      <div class="left">
        <div class="info-img">
          <img v-lazy="item.coverUrl" alt="">
        </div>
        <div class="info-msg">
          <span>{{ item.name }}</span>
          <span>{{ item.radio.name }}</span>
        </div>
      </div>
      <div class="right">
        <span>{{ item.radio.category }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      title: String,
      data: Array
    }
  }
</script>

<style scoped>
.recommend-radio{
  padding-top: 20px;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
}

.recommend-info{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.left{
  display: flex;
  width: 100%;
}

.info-img img{
  width: 60px;
  height: 60px;
}

.info-msg{
  display: flex;
  flex-direction: column;
  font-size: 12px;
  width: 75%;
}

.right{
  width: 20%;
}

.right span{
  border: 1px solid;
  vertical-align: middle;
}
</style>